<template>
  <div id="PrintData">
    <div class="View_Div1"></div>
    <div class="View_Div2">
      <el-button @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回</el-button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button v-print="'#PrintData'" type="primary" size="mini" icon="el-icon-printer">
        打印
      </el-button>
    </div>
    <div class="View_Div3">
      <el-row :gutter="10">
        <el-col :lg="22">
          <div>

            <div class="View_Div3_Div1">
              <h4>{{ViewFrom.Title}}</h4><br />
              <span>发布:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ViewFrom.FullName}}</span>
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>参加人员:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{UserListData}}</span></span>
            </div>
          </div>
        </el-col>
        <el-col :lg="2">
          <div>

            <div class="View_Div3_Div2">
              <span>{{ViewFrom.CompleteDate}}</span>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
    <div class="View_Div4">

      <el-row :gutter="10">
        <el-col :lg="24">

          <div class="View_Div4_Div1">
            <span>{{ViewFrom.Description}}</span>
          </div>

        </el-col>

        <el-col :span="24">
          <br />
          <span>任务进度（<span v-if="Object.keys(ViewFrom).length">{{ViewFrom.StartDate|TimeFilter}}</span> 至
            <span v-if="Object.keys(ViewFrom).length">{{ViewFrom.EndDate|TimeFilter}}</span>）</span>
        </el-col>

        <el-col :lg="24">
          <el-progress :percentage="progress"></el-progress>
        </el-col>

        <el-col :span="24">

          <!-- 用户反馈 -->
          <div v-html="ViewFrom.Feedback"></div>
          <br />
          <br />
          <span style="color:green">{{ViewFrom.Note}}</span>
          <br />
        </el-col>

      </el-row>

      <el-row :gutter="10">
        <el-form label-width="100px" label-position="top" :inline="true" size="small">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select ref="Status" v-model="ViewFrom.StatusID" placeholder="请选择" style="width:100%">
                <el-option v-for="item in StatusList" :key="item.ID" :label="item.StatusName_CHS" :value="item.ID">
                  {{item.StatusName_CHS}}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="反馈">
              <el-input v-model="UserFeedback"></el-input>
            </el-form-item>
          </el-col>

          <el-form-item style="padding-left:5px">
            <el-button type="primary" @click="SaveClick" size="small" icon="el-icon-check">保存</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="$router.go(-1)" size="small" icon="el-icon-close">返回</el-button>
          </el-form-item>
        </el-form>
      </el-row>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.View_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
.View_Div2 {
  border-bottom: 1px solid #f7f7f7;
  padding-top: 6px;
  padding-bottom: 6px;
}
.View_Div3 {
  border-bottom: 1px solid #dcdfe6;
  .View_Div3_Div1 {
    padding-bottom: 10px;
    padding-top: 38px;
    h4 {
      font-size: 22px;
    }
    span {
      color: rgb(180, 180, 180);
      font-size: 16px;
    }
  }
  .View_Div3_Div2 {
    padding-bottom: 10px;
    padding-top: 68px;
    span {
      color: rgb(180, 180, 180);
      font-size: 14px;
    }
  }
}
.View_Div4 {
  border-bottom: 1px solid #dcdfe6;
  padding-top: 8px;
  padding-bottom: 15px;
  .View_Div4_Div1 {
    padding-bottom: 6px;
  }
  span {
    font-size: 14px;
  }
}
.View_Div5 {
  padding-top: 10px;
  padding-bottom: 12px;
}
a {
  color: white;
  text-decoration: none;
}
.el-row {
  margin-bottom: 10px;
}
.NameEditCls {
  padding: 10px;
}
.el-form-item {
  width: 90%;
}
</style>

<script>
export default {
  data () {
    return {
      //表单数据
      ViewFrom: {},
      //状态下拉框显示数据
      StatusList: [],
      //参加人员UserList转为FullName
      UserListData: '',
      //Feedback用户反馈
      UserFeedback: '',
      sumUserFeedback: '',
      FeedbackTime: null,
      //进度
      progress: 0,
      StatusID: 0,
      //添加修改bug修复
      SubmitLoading: false,
    };
  },
  methods: {
    //页面数据
    querySelect () {
      this.$axios({
        url: '/HrApi/TaskMange/SelectBinding',
        method: 'GET',
      }).then(res => {
        this.StatusList = res.data.StatusIDdata;
      })
    },
    //下拉框绑定
    queryData () {
      if (Object.keys(this.$route.query).length) {
        this.$axios({
          url: '/HrApi/TaskMange/ViewSelectBinding',
          method: 'GET',
          params: {
            pk_Task: this.$route.query.id
          }
        }).then(res => {
          if (!res.data.code) {
            this.ViewFrom = res.data.data;
            this.StatusID = this.ViewFrom.StatusID;
            console.log(this.StatusID)
            if (this.ViewFrom.StatusID == 0) {
              this.progress = 25
            }
            else if (this.ViewFrom.StatusID == 1) {
              this.progress = 50
            }
            else if (this.ViewFrom.StatusID == 2) {
              this.progress = 75
            }
            else if (this.ViewFrom.StatusID == 3) {
              this.progress = 100
            }
            this.$axios({
              url: '/HrApi/TaskMange/ReceiveUserTextBinding',
              method: 'GET',
              params: {
                UserList: this.ViewFrom.UserList
              }
            }).then(res => {
              this.UserListData = res.data.data;
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    //更改
    SaveClick () {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDay();
      var hours = date.getHours();
      var min = date.getMinutes();
      this.FeedbackTime = year + "-" + month + "-" + day + "  " + hours + ":" + min
      if (this.ViewFrom.StatusID != this.StatusID && this.UserFeedback != "") {
        this.sumUserFeedback = `${this.ViewFrom.FullName}<span style="font-size:8pt; color:#999; margin-left:3px;">[${this.FeedbackTime}]：</span>将状态修改为【${this.$refs.Status.selectedLabel}】</span><br/>${this.ViewFrom.FullName} <span style="font-size:8pt; color:#999; margin-left:3px;">[${this.FeedbackTime}]：</span> ${this.UserFeedback} <br />`
      }

      else if (this.UserFeedback == "" && this.ViewFrom.StatusID != this.StatusID) {
        this.sumUserFeedback = `${this.ViewFrom.FullName}<span style="font-size:8pt; color:#999; margin-left:3px;">[${this.FeedbackTime}]：</span>将状态修改为【${this.$refs.Status.selectedLabel}】</span><br/>`
      } else if (this.UserFeedback != "" && this.ViewFrom.StatusID == this.StatusID) {
        this.sumUserFeedback = `${this.ViewFrom.FullName} <span style="font-size:8pt; color:#999; margin-left:3px;">[${this.FeedbackTime}]：</span> ${this.UserFeedback}<br />`
      }
      else if (this.ViewFrom.StatusID == this.StatusID && this.UserFeedback == "") {
        this.sumUserFeedback = ''
      }
      this.SubmitLoading = true;
      this.$axios({
        url: '/HrApi/TaskMange/TaskViewUpdata',
        method: "POST",
        data: this.$Qs.stringify({
          Task: JSON.stringify(this.ViewFrom),
          sumUserFeedback: this.sumUserFeedback,
        })
      }).then(res => {
        this.SubmitLoading = false;
        if (res.data.msg == "更新成功") {
          if (this.ViewFrom.StatusID == this.StatusID && this.sumUserFeedback == "") {
            this.$message.success("无任何更新");
          }
          else {
            this.$message.success("保存成功");
            this.ViewFrom.Feedback += this.sumUserFeedback;
            this.queryData();
          }
        }
        else {
          this.$message.error("保存失败");
        }
      })
    }
  },
  mounted () {
    this.querySelect();
    this.queryData();
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  watch: {
    'ViewFrom.StatusID' () {
      if (this.ViewFrom.StatusID == 0) {
        this.progress = 25
      }
      else if (this.ViewFrom.StatusID == 1) {
        this.progress = 50
      }
      else if (this.ViewFrom.StatusID == 2) {
        this.progress = 75
      }
      else if (this.ViewFrom.StatusID == 3) {
        this.progress = 100
      }
    }
  }
}
</script>
